<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: rgb(13, 151, 20);
        }
        
        .enter {
            width: 200px;
            height: 200px;
            background-color: rgb(185, 164, 202);
        }
        
        .move {
            width: 200px;
            height: 200px;
            background-color: rgb(221, 111, 111);
        }
        
        .leave {
            width: 200px;
            height: 200px;
            background-color: rgb(111, 137, 221);
        }
        
        .click {
            width: 200px;
            height: 200px;
            background-color: rgb(38, 53, 100);
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="enter">mouseenter/leave</div>
    <div class="leave">leave</div>
    <div class="move">mousemove</div>
    <div class="click">click</div>
    <p>就不要你复制</p>
    <p class="p1">测试封装的兼容函数</p>
    <script>
        //获取到元素
        var box = document.querySelector('.box');
        // 给元素添加一个事件监听函数
        box.oncontextmenu = function() {
            alert('点击呢')
        }

        var p = document.querySelector('p');
        p.oncontextmenu = function(e) {
            //阻止默认行为
            e.preventDefault();
            return
        }
        p.oncopy = function(e) {
            console.log('copy');
            e.preventDefault()
        }

        //
        var move = document.querySelector('.move');
        move.onmousemove = function(e) {
            console.log('mousemove')
            console.log(e.clientX)
        }

        move.onmouseleave = function(e) {
            console.log('mouseleave')
        }

        var enter = document.querySelector('.enter');
        enter.onmouseenter = function(e) {
            console.log('mouseenter')
            console.log(e)
        }
        var leave = document.querySelector('.leave');
        leave.onmouseleave = function(e) {
            console.log(e)
        }

        var click = document.querySelector('.click');
        click.addEventListener('click', say)

        function say() {
            console.log("hello!")
        }

        function addEvent(element, type, callBack) {
            // 兼容IE10.0以下
            if (element.attachEvent) {
                element.attachEvent('on' + type, callBack);
            } else {
                element.addEventListener(type, callBack, false);
            }
        }

        var p1 = document.querySelector('.p1');
        addEvent(p1, 'click', function(e) {
            console.log("点击呢");
            console.log(e);
        })
    </script>
</body>

</html>